<template>
    <header>
        <div class="container">
            <img src="@/assets/images/logo.png" class="logo">
            <ul>
                <li v-for="item in linkList" :key="item.name">
                    <a :href="item.href" target="_blank">{{item.name}}</a>
                </li>
            </ul>
            <div class="search-bar">
                <div class="search-bar-form">
                    <input type="text fl" class="text" maxlength="10" autocomplete="off"
                    placeholder="搜索商品" v-model.trim="searchValue"
                    @keyup="waitSearch(1000)"
                    @keyup.enter="getGhSearch(), searchJump(searchValue)"
                    @focus="showSearchColumn=true" @blur="showSearchColumn=false"/>
                    <i class="iconfont fr" @mousedown="getGhSearch(),searchJump(searchValue)">&#xe600;</i>
                </div>
                <div class="search-column" name="search-column" v-if="showSearchColumn">
                    <div class="search-history">
                        <p>
                            <label>最近搜索</label>
                            <i class="iconfont" @mousedown="emptyGhSearch()">&#xe69d;</i>
                        </p>
                        <ul class="search-history-list">
                            <li @mousedown="searchValue=item" v-for="(item,index) in ghList" :key="index">
                                <a href="javascript:;">{{item}}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="search-tips search-history-list">
                        <p>您可能想搜:</p>
                        <ul>
                            <li @mousedown="searchValue=item" v-for="(item,index) in searchTipsList" :key="index">
                                <a href="javascript:;">{{item}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </header>
  
</template>

<script>
import { createLinkData, goodsSearchTips } from '@/api/home'
import { ref, watch } from 'vue'
export default {
  name: 'VmHeader',
  setup () {
    const linkList = [createLinkData('华为专区','https://www.vmall.com/portal/activity/index.html?pn=huaweizonePC'),
    createLinkData('鸿蒙智联','https://www.vmall.com/portal/activity/index.html?pn=harmonyosconnectpc'),
    createLinkData('莫塞尔','https://www.vmall.com/portal/activity/index.html?pageId=301002069'),
    createLinkData('华为智选','https://www.vmall.com/portal/activity/index.html?pn=zhixuanpc'),
    createLinkData('HarmonyOS','https://sale.vmall.com/hwharmony.html'),
    createLinkData('特惠企采','https://sale.vmall.com/hwcompany.html'),
    createLinkData('教育购','https://www.vmall.com/portal/activity/index.html?pageId=401023051')]

    const ghList = ref([]) // 历史搜索记录，存本地
    const searchValue = ref('') // 搜索的内容

    // 控制搜索栏显示
    const showSearchColumn = ref(false)

    // 是否有历史记录
    if (JSON.parse(localStorage.getItem('goodsHistoryList'))) {
        // 如果本地存储的数据goodsHistoryList有值, 直接赋值给goodsSearchHistory
        ghList.value = JSON.parse(localStorage.getItem('goodsHistoryList'))
    }
    // 搜索历史记录
    const getGhSearch = () => {
        if (searchValue.value == '') return
        else {
            // 没有搜索记录, 把搜索值push进数组首位, 存入本地
            if (!ghList.value.includes(searchValue.value)) {
                ghList.value.unshift(searchValue.value)
                localStorage.setItem('goodsHistoryList', 
                JSON.stringify(ghList.value))
            } else {
                // 有搜索记录, 删除之前的旧记录, 将新搜索值重新push到数组首位
                let i =ghList.value.indexOf(searchValue.value)
                ghList.value.selice(i,1)
                ghList.value.unshift(searchValue.value)
                localStorage.setItem('goodsHistoryList', JSON.stringify(
                    ghList.value))
            }
        }
    }

    // 清空历史记录
    const emptyGhSearch = () => {
        localStorage.removeItem('goodsHistoryList')
        ghList.value = [];
    }

    // 搜索提示
    const searchTipsList = ref([])
        // 防抖功能
    const waitSearchFlag = ref(false) // 防抖
    const timer = ref(0)
    const waitSearch = delay => {
        clearTimeout(timer.value)
        waitSearchFlag.value = false
        timer.value = setTimeout(() => {
            waitSearchFlag.value = true
        },delay)
    }
        // 监听输入内容发生变化就请求搜索提示
    watch([searchValue,waitSearchFlag], () => {
        if(searchValue.value == '' || showSearchColumn.value==false ||
        waitSearchFlag.value == false) return
        searchTipsList.value = []
        goodsSearchTips(searchValue.value).then(data => {
            const wordList = data.data.wordList
            for(let i=0; i<wordList.length; i++) {
                const { keyword } = wordList[i]
                console.log('keyword:'+keyword)
                searchTipsList.value.push(keyword)
            }
        })
    })

        // 搜索跳转
    const searchJump = keyword => {
        const href = `https://www.vmall.com/portal/search/index.html?
        targetRoute=searchresult&searchWord=${keyword}&searchHistoryShow=true&searchResultPageProdShow=true#/`
        window.open(href,'_blank')
    }
    
    return { linkList, getGhSearch, ghList, searchValue, 
    emptyGhSearch, showSearchColumn, searchTipsList, waitSearch, searchJump }
  }
}
</script>

<style lang="scss" scoped>
header {
    background: rgb(255,255,255);
    width: 100%;
    height: 74px;
    position: sticky;
    top: 0;
    z-index: 99999;
    .container {
        display: flex;
        align-items: center;
        height: 100%;
        .logo {
            height: 100%;
        }
        ul {
            display: flex;
            align-items: center;
            margin-left: 5%;
            width: 60%;
            li {
                margin-left: 5%;
                font-size: 16px;
                a {
                    &:hover {
                        color: #ff2121;
                    }
                }
            }
        }
        .search-bar {
            position: absolute;
            right: 0;
            border-radius: 16px 16px 0 0;
            display: flex;
            align-items: center;
            background: #fff;
            &-form {
                width: 238px;
                height: 28px;
                border: 1px solid gray;
                border-radius: 15px;
                position: relative;
                display: flex;
                align-items: center;
                .text {
                    border: none;
                    outline: none;
                    color: #3A3A3A;
                    width: 205px;
                    text-indent: 15px;
                    margin-left: 4px;
                }
            }
            i {
                color: #c2ccd0;
                cursor: pointer;
            }
            .search-column {
                position: absolute;
                top: 40px;
                left: 0;
                width: 240px;
                z-index: 999;
                line-height: 26px;
                border-radius: 8px;
                background: #fff;
                .search-history {
                    border-top: 1px solid #F2F2F5;
                    p {
                        text-indent: 15px;
                        height: 30px;
                        line-height: 30px;
                        label {
                            font-size: 13px;
                            color: #888;
                        }
                        i {
                            float: right;
                            margin-right: 17px;
                            cursor: pointer;
                            font-size: 13px;
                            color: #75878a;
                        }
                    }
                    &-list {
                        text-indent: 15px;
                        display: block;
                        margin: 0;
                        width: 100%;
                        li {
                            margin: 0;
                            width: 100%;
                            &:hover {
                                background: #e2e1e4;
                            }
                            a {
                                font-size: 12px;
                                display: block;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                color: #333;
                                height: 30px;
                                line-height: 30px;
                            }
                        }
                    }
                }
                .search-tips {
                    margin-top: 5%;
                    border-top: 1px solid #3d3b4f;
                    p {
                        font-size: 13px;
                        color: #ff4c00;
                    }
                    ul {
                        display: block;
                        width: 100%;
                        margin-left: 0;
                        li {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}
</style>>
